let data=null;
let cloumns=Array.from(document.querySelectorAll(".cloumn"));
let imgboxs=null;
let loadbox=document.querySelector(".loadmore");//加载更多的盒子
//1. 获取数据  ajax四步
function getData(){
   //1.创建 XMLHttpRequest 核心对象
   let xhr=new XMLHttpRequest;
   //2.建立连接
   xhr.open("get","data.json",false);
   //3.注册监听
   xhr.onreadystatechange=function(){
     if(xhr.readyState===4&&xhr.status===200){
        data=JSON.parse(xhr.response);
     }
   }
   //4.发送数据
   xhr.send();
}
getData();

//2. 循环渲染
function render(){
    //发现数据图片的宽度，过宽，与自己写图片大小不相符
    //1. 先统一处理数据图片的宽度
    data.map((item)=>{
        //取出每个元素的 宽度 和 高度
        let {width,height}=item;
        item.width=230;//重新设置宽度
        item.height=230*height/width;//按比例重新设置高度
        return item;//返回当前设置完成的元素
    })

    let groups;//undefined
    for(let i=0;i<data.length;i+=3){//0,3,6,9....
        // [0,1,2]  [3,4,5]...
        groups=data.slice(i,i+3);//0-3 3-6 6-9...
        groups.sort((a,b)=>{//[小 中 大]
            return a.height-b.height;
        })
        
        cloumns.sort((a,b)=>{//[大 中 小]
            return b.offsetHeight-a.offsetHeight;
        })

        //按照索引下标一一对象插入
        groups.forEach((item,index)=>{
            let {id,height,pic,title}=item;
            let str=`<div class="item" data-id="${id}">
                        <div class="imgbox" style="height:${height}px">
                            <img src="" data-src="${pic}" alt="" style="height:${height}px">
                        </div>
                        <p>${title}</p>
                    </div>`
            cloumns[index].innerHTML += str;
        })
     
    }

    imgboxs=Array.from(document.querySelectorAll(".imgbox"));

}
render()

function loadimg(img){
    let dataSrc=img.getAttribute("data-src");
    let newimg=new Image;
    newimg.src=dataSrc;
    newimg.onload=function(){
        img.src=dataSrc;
        newimg=null;
        img.flag=true;
    }
}

function handle(){
   let ob=new IntersectionObserver((changes)=>{
       //console.log(changes);
       changes.forEach((change)=>{
           if(change.isIntersecting){//true--当前盒子是满足条件的盒子
              //当前盒子下面的图片
               let img=change.target.querySelector("img");
               if(img.flag){
                ob.unobserve(change.target);
                 return;
               }
               loadimg(img);
           }
       })
   },{
        threshold:[1]
   })

   imgboxs.forEach((imgbox)=>{
     ob.observe(imgbox);
   })
}
handle()

let count=0;
function loadmore(){//加载更多
   let obload=new IntersectionObserver((changes)=>{
     if(changes[0].isIntersecting){
        count++;
        if(count>3){
            obload.unobserve(loadbox);
            loadbox.innerHTML="没有更多数据，加载已完成";
            return;
        }
        getData()
        render()
        handle()
     }
   },{
     threshold:[0.5]
   })
   obload.observe(loadbox);
}
loadmore()

